<template>
	<div id="souAddfile" class="bg-white">
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item label="素材名称">
				<div class="input50">
					<el-input max="32" v-model="form.name"></el-input>
				</div>
			</el-form-item>

			<el-form-item label="类型">
				<el-checkbox-group v-model="form.types">
					<el-checkbox label="1">在线编辑</el-checkbox>
				</el-checkbox-group>
			</el-form-item>

			<el-form-item label="资源类型">
				<el-radio-group v-model="form.resource">
					<el-radio label="1" value="1">软文资源</el-radio>
					<el-radio label="2" value="2">公众号</el-radio>
					<el-radio label="3" value="3">微博</el-radio>
					<el-radio label="4" value="4">视频/直播</el-radio>
					<el-radio label="5" value="5">小红书</el-radio>
					<el-radio label="6" value="6">自媒体</el-radio>
				</el-radio-group>
			</el-form-item>

			<!-- <el-form-item label="内容" prop="abstract">
			<editor ref="myTextEditor"
				v-model="ruleForm.content"
				:options="editorOption"
				@blur="onEditorBlur($event)"
				@focus="onEditorFocus($event)"
				@ready="onEditorReady($event)">
			</editor>  
		  </el-form-item> -->
			<!-- <el-card style="height: 500px;">
		        <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
		        </quill-editor>
		   </el-card> -->
			<el-form-item label="内容" prop="abstract">
				<el-card style="height: 610px;">
					<quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
						<!-- 自定义toolar -->
						<div id="toolbar" slot="toolbar">
							<!-- Add a bold button -->
							<button class="ql-bold" title="加粗">Bold</button>
							<button class="ql-italic" title="斜体">Italic</button>
							<button class="ql-underline" title="下划线">underline</button>
							<button class="ql-strike" title="删除线">strike</button>
							<button class="ql-blockquote" title="引用"></button>
							<button class="ql-code-block" title="代码"></button>
							<button class="ql-header" value="1" title="标题1"></button>
							<button class="ql-header" value="2" title="标题2"></button>
							<!--Add list -->
							<button class="ql-list" value="ordered" title="有序列表"></button>
							<button class="ql-list" value="bullet" title="无序列表"></button>
							<!-- Add font size dropdown -->
							<select class="ql-header" title="段落格式">
								<option selected>段落</option>
								<option value="1">标题1</option>
								<option value="2">标题2</option>
								<option value="3">标题3</option>
								<option value="4">标题4</option>
								<option value="5">标题5</option>
								<option value="6">标题6</option>
							</select>
							<select class="ql-size" title="字体大小">
								<option value="10px">10px</option>
								<option value="12px">12px</option>
								<option value="14px">14px</option>
								<option value="16px" selected>16px</option>
								<option value="18px">18px</option>
								<option value="20px">20px</option>
							</select>
							<select class="ql-font" title="字体">
								<option value="SimSun">宋体</option>
								<option value="SimHei">黑体</option>
								<option value="Microsoft-YaHei">微软雅黑</option>
								<option value="KaiTi">楷体</option>
								<option value="FangSong">仿宋</option>
								<option value="Arial">Arial</option>
							</select>
							<!-- Add subscript and superscript buttons -->
							<select class="ql-color" value="color" title="字体颜色"></select>
							<select class="ql-background" value="background" title="背景颜色"></select>
							<select class="ql-align" value="align" title="对齐"></select>
							<button class="ql-clean" title="还原"></button>
							<!-- You can also add your own -->
						</div>
					</quill-editor>
				</el-card>
			</el-form-item>


			<el-form-item label="备注">
				<div class="input50">
					<el-input type="textarea" max="999" v-model="form.desc"></el-input>
				</div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">立即创建</el-button>
				<!-- <el-button>取消</el-button> -->
			</el-form-item>
		</el-form>

	</div>
</template>

<script>
	import {
		quillEditor,
		Quill
	} from 'vue-quill-editor';
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	//引入font.css 
	import '../../assets/font.css'
	// 自定义字体大小
	let Size = Quill.import('attributors/style/size')
	Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
	Quill.register(Size, true)

	// 自定义字体类型
	var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
		'宋体', '黑体'
	]
	var Font = Quill.import('formats/font')
	Font.whitelist = fonts
	Quill.register(Font, true)

	export default {
		components: {
			quillEditor
		},
		data() {
			return {
				form: {
					name: '',
					types:[],
					resource: '1',
					desc: ''
				},
				ruleForm: {
					content: ''
				},
				content: null,
				editorOption: {
					placeholder: "请输入",
					theme: "snow", // or 'bubble' 
					modules: {
						toolbar: {
							container: '#toolbar'
						}
					}
				},
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
				if(this.form.name == ""){
					this.$message("素材名称不能为空！");
					return;
				}
				let datas = {
					content: this.content,
					id : '',
					mark:this.form.desc,
					title : this.form.name ,
					smTypeId : this.form.resource,
					type :this.form.types>0?this.form.types.join():0
				}
				console.log(datas);
				this.$api.req.saveSourceMaterial(datas)
				.then( res => {
					console.log(res);
					this.$message(res.data);
				})
				
				//this.getContent();
			},
			getUEContent() { // 获取内容方法
				return this.editor.getContent()
			},
			setContent() {
				this.initContent = '设置好的内容';
				this.$refs.editor.setHtml(this.initContent) //如设置：后台返回来的固定内容
				console.log(this.initContent, '设置编辑器内容')
			},
			getContent() {
				this.initContent = this.$refs.editor.getHtml(this.initContent);
				console.log(this.initContent, '获取编辑器当前内容的html代码片段')
			},
			//vue 跳转
			goNextPage() {
				this.$router.push({
					name: 'testEgdit',
				})
			}
		},
		mounted() {
			const _this = this;
			// this.editor = UE.getEditor('editor', this.config); // 初始化UE
			this.editor.addListener("ready", function() {
				_this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后，放入内容。
			});
		},

	}
</script>

<style>

	#souAddfile {
		padding: 20px;

	}

	.bg-white {
		background-color: #FFFFFF;
	}

	.input50 {
		width: 50%;
	}

</style>
